<template>
    <div>
        <el-form :model="formData" inline="true" ref="formData" :rules="rules"
                 class="demo-form-inline" style="margin-left: 100px" labelWidth="100px">
            <el-row style="margin-top: 20px;">
                <el-col>
                    <el-form-item label="会员姓名" prop="truename">
                        <el-input size="mini" v-model="formData.truename" v-bind:style="commonstyle"
                                  placeholder="必填"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="">
                <el-col>
                    <el-form-item label="会员性别" prop="sex">
                        <el-select size="mini" v-model="formData.sex" v-bind:style="commonstyle" placeholder="请选择性别">
                            <el-option
                                v-for="item in sexList"
                                :key="item.type"
                                :label="item.name"
                                :value="item.type">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="">
            </el-row>

            <el-row style="">
                <el-col>
                    <el-form-item label="手机号码 " prop="mobile">
                        <el-input size="mini" v-model="formData.mobile" v-bind:style="commonstyle"
                                  placeholder="必填"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row style="">
                <el-col>
                    <el-form-item label="身份证号 " prop="cardno">
                        <el-input size="mini" v-model="formData.cardno" v-bind:style="commonstyle"
                                  placeholder="必填"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row style="">
                <el-col>
                    <el-form-item label="会员备注" prop="comments">
                        <el-input size="mini" v-model="formData.comments" v-bind:style="commonstyle"
                                  placeholder=""></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row style="">
                <el-col>
                    <el-form-item label="会员类型" prop="usertype">
                        <el-radio-group size="mini" v-model="formData.usertype" @change="usertypechange">
                            <el-radio :label="1">会员客户</el-radio>
                            <el-radio :label="2">普通客户</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-row style="">
                <el-col>
                    <el-form-item label="归属会员" v-if="usertypedis">
                        <el-select
                            v-model="formData.vipuid"
                            filterable
                            remote
                            v-bind:style="commonstyle"
                            size="mini"
                            reserve-keyword
                            placeholder="模糊查询会员"
                            :remote-method="queryVip"
                            :loading="loading">
                            <el-option
                                v-for="item in queryviplist"
                                :key="item.cid"
                                :label="item.truename"
                                :value="item.cid">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>




            <el-row>
                <el-col>
                    <el-button type="primary" style="margin-left: 200px;width: 150px;" @click="submitForm('formData')">
                        提交<i
                        class="el-icon-upload el-icon--right"></i></el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script>
    import {mapActions, mapState, mapMutations, mapGetters} from 'vuex'
    import {login, addCustomer, customerList, deleteCustomer, updateCustomer, customerDetail,queryVipTip} from '@/api/getData'

    export default {
        data() {

            return {
                loading:true,
                usertype:'2',
                usertypedis: false,
                queryviplist: [],
                opertype: 'add',
                commonstyle: {
                    width: '300px',
                },
                value: '',
                rules: {
                    truename: [{required: true, message: '请填写姓名', trigger: 'blue'}],
                    mobile: [{required: true, message: '请填写手机号码', trigger: 'blue'}],
                    cardno: [{required: true, message: '请填写身份证号', trigger: 'blue'}]
                },
                formData: {
                    giftid:'',
                    giftnum:'',
                    usertype: '',
                    mobile: '',
                    truename: '',
                    sex: 'm',
                    vipuid: '',
                    cardno: '',
                    comments: ''
                }
            }
        }
        ,
        mounted() {
            this.formData.cid = this.$route.query.cid;

            if (this.formData.cid != null)
                this.opertype = "modify";
            if ((this.opertype == "modify")) {
                this.initData();
            }
            else{
                //this.usertype='1';
                //this.formData.usertype='1';
            }
        }
        ,
        watch: {
            usertype: function (newValue,old) {
                if(newValue==2)
                    this.usertypedis = true;
                else
                    this.usertypedis=false;
            }
        },
        methods: {
            ...mapActions(['getGiftList']),
            ...mapMutations(['setRuleList']),

            async queryVip(v) {
                this.loading=true;
                const res= await queryVipTip({"data":{'truename':v,'usertype':'1'}});
                if(res.success==true){
                    this.loading=false;
                    this.queryviplist=res.data;
                }


            },
            usertypechange(v) {
                if (v == 2)
                    this.usertypedis = true;
                else
                    this.usertypedis = false;
            },

            async getRules() {
                const res = await getRuleList({'data': {}});
                if (res != null) {
                    this.setRuleList(res.data);

                }
            },
            async initData() {
                const res = await customerDetail({'data': {'cid': this.formData.cid}});
                if (res.success == true) {
                    this.formData = res.data;
                    this.usertype=this.formData.usertype;
                }

            },
            handleCheckAllChange(val) {
                if (val === true) {
                    var temp = [];
                    this.ruleList.forEach((item) => {
                        temp.push(item.id)
                    });
                    this.formData.rules = temp;
                }
                else {
                    this.formData.rules = [];
                }
                this.isIndeterminate = false;
            },
            handleCheckedChange(value) {
                let checkedCount = this.formData.rules.length;
                this.checkAll = checkedCount === this.ruleList.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.ruleList.length;
            },


            rulechange(key) {
                if (key == 2) {
                    this.menudisabled = false;
                }
                else {
                    this.menudisabled = true;
                }

            },

            async updateForm(formName) {
                try {
                    this.$refs[formName].validate(async (valid) => {
                        if (valid) {
                            var data = {"data": this.formData}
                            let result = await updateCustomer(data);
                            if (result.success == true) {
                                this.$message({
                                    type: 'success',
                                    message: '修改成功'
                                });

                            }
                        } else {
                            this.$notify.error({
                                title: '错误',
                                message: '请检查输入是否正确',
                                offset: 100
                            });
                        }
                    })
                } catch (err) {
                    console.log(err);
                }

            },
            async addForm(formName) {
                try {
                    this.$refs[formName].validate(async (valid) => {
                        if (valid) {
                            var data = {"data": this.formData}
                            let result = await addCustomer(data);
                            if (result.success == true) {
                                this.$message({
                                    type: 'success',
                                    message: '创建成功'
                                });
                                this.formData = {};

                            }
                        } else {
                            this.$notify.error({
                                title: '错误',
                                message: '请检查输入是否正确',
                                offset: 100
                            });
                        }
                    })
                } catch (err) {
                    console.log(err);
                }

            },


            async submitForm(formName) {
                try {
                    if ((this.opertype == "modify")) {
                        this.updateForm('formData');
                        return;
                    }

                    else {
                        this.addForm('formData');
                        return;
                    }
                } catch (err) {
                    console.log(err);
                }
            }
        }
        ,
        computed: {
            ...
                mapGetters(['giftList','schoolList', 'sexList', 'dutyList', 'workStatusList', 'ruleList'])
        }
        ,
    }

</script>

<style lang="less">
    .el-form-item {
        margin-bottom: 10px;
    }


</style>
